<template>
  <div class="GdwyyAppTodoToread-container fill-w flex-center">
    <GdwyyAppBigTitle icon="zl/icon_fz" title="待办订阅" :togoUrl="(obj.dbNum || 0 )+ '条'" urls="/publicline/todoToread">
    </GdwyyAppBigTitle>
    <van-loading v-if="loading" type="spinner" color="#1989fa" />
    <div v-else class="content">
      <div class="nums" style="display: flex; text-align: center; font-size: 16px; margin-bottom: 10px">
        <div style="flex:1">超时 <a style="text-decoration: underline" @click="goUrl('7')">{{ obj.csNum || 0 }}</a></div>
        <div style="flex:1; margin: 0 6px">待办 <a style="text-decoration: underline" @click="goUrl('0')">{{ obj.dbNum || 0 }}</a></div>
        <div style="flex:1">已办 <a style="text-decoration: underline" @click="goUrl('1')">{{ obj.ybNum || 0 }}</a></div>
      </div>
      <!-- <div class="">
        <div class="flex items-center justify-between bgText" style="width: 100%" v-for="(item, index) in list"
          :key="index">
          <div class="flex items-center itemList" style="width: 80%">
            <div :class="item.state == '0' ? 'icon_db' : 'icon_dy'">
              <img :src="item.state | filterIcon" class="mx-10px" alt="" height="16" width="16" />
              <span>{{ item.stateName }}</span>
            </div>
            <div class="truncate" style="width: 100%; font-size: 15px">{{ item.orderTitle }}</div>
          </div>
          <div class="time">{{ item.pastMinutes }}分钟前</div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import { GdwyyAppBigTitle, GdwyyAppSmallTitle } from '@/components/reconsitution/index.js'
import { doreadList, csYbYbNum } from '@/api/publicline/todoread.js'
import Vue from 'vue'
import { USER_INFO } from "@/store/mutation-types"

export default {
  name: 'todoAnd',
  components: { GdwyyAppBigTitle, GdwyyAppSmallTitle },

  data() {
    return {
      gridCode: null,
      loading: 'loading',
      loading: false,
      total: 0,
      list: [],
      obj: {
        dbNum: 0,
        ybNum: 0,
        csNum: 0,
      }
    }
  },
  filters: {
    filterIcon(icon) {
      const statusMap = {
        0: 'icon_db',
        1: 'icon_dy',
      }
      return require('@/assets/imgs/reconsitution/' + statusMap[icon] + '.png')
    }
  },

  mounted() {
    this.loading = false
    // this.userInfo = Vue.ls.get(USER_INFO).appRole
    this.gridCode = localStorage.getItem('$gridId')
    this.getNums()
    // this.getList()
  },

  methods: {
    handleGoDetail({ detailUrl, label, isHas }) {
      if (!detailUrl) return
      this.$open.call(this, detailUrl)
    },
    async getNums() {
      const res = await csYbYbNum({ grId: this.gridCode })
      const { result, success } = res
      if (success) {
        this.obj = {...result[0]}
      } else {
        this.obj = {
          dbNum: 0,
          ybNum: 0,
          csNum: 0
        }
      }
    },
    // 获取列表
    async getList() {
      const res = await doreadList({ gridCode: this.gridCode, state: 0, pageNum: 1, pageSize: 3 })
      const { result, success } = res
      if (success) {
        this.total = result.total || 0
        this.list = result.list || []
      }
    },
    goUrl(type){
      sessionStorage.setItem('actives', type)
      this.$router.push({ path: '/publicline/todoToread' })
    }
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/reconsitution/common.less';

.GdwyyAppTodoToread-container {
  background: #ffffff;
  box-sizing: border-box;
  flex-wrap: wrap;
  padding-top: 12px;

  .content {
    width: 100%;
    padding: 15px;

    .bgText {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 40px;
      -o-text-overflow: ellipsis;

      .icon_db {
        display: flex;
        align-items: center;
        background: rgba(108, 122, 255, 0.10);
        border-radius: 2px;
        border-radius: 2px;
        font-size: 12px;
        color: #6C7AFF;

        span {
          margin: 0 4px;
        }
      }

      .icon_dy {
        display: flex;
        align-items: center;
        background: rgba(108, 122, 255, 0.10);
        border-radius: 2px;
        border-radius: 2px;
        font-size: 12px;
        color: #FFAB4D;

        span {
          margin: 0 4px;
        }
      }

      .truncate {
        // display: flex;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        -o-text-overflow: ellipsis;
        margin-left: 10px;
      }

      .itemList {
        display: flex;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .time {
        font-size: 12px;
        color: #999999;
      }
    }
  }
}
</style>